<svg
	aria-roledescription="flowchart-v2"
	role="graphics-document document"
	viewBox="-8 -8 403.34375 55"
	style="max-width: 403.34375px;"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns="http://www.w3.org/2000/svg"
	width="100%"
	id="mermaid-0"
	{...$$props}
	><style>
		#mermaid-0 {
			font-family: 'trebuchet ms', verdana, arial, sans-serif;
			font-size: 16px;
			fill: #333;
		}
		#mermaid-0 .error-icon {
			fill: #552222;
		}
		#mermaid-0 .error-text {
			fill: #552222;
			stroke: #552222;
		}
		#mermaid-0 .edge-thickness-normal {
			stroke-width: 2px;
		}
		#mermaid-0 .edge-thickness-thick {
			stroke-width: 3.5px;
		}
		#mermaid-0 .edge-pattern-solid {
			stroke-dasharray: 0;
		}
		#mermaid-0 .edge-pattern-dashed {
			stroke-dasharray: 3;
		}
		#mermaid-0 .edge-pattern-dotted {
			stroke-dasharray: 2;
		}
		#mermaid-0 .marker {
			fill: #333333;
			stroke: #333333;
		}
		#mermaid-0 .marker.cross {
			stroke: #333333;
		}
		#mermaid-0 svg {
			font-family: 'trebuchet ms', verdana, arial, sans-serif;
			font-size: 16px;
		}
		#mermaid-0 .label {
			font-family: 'trebuchet ms', verdana, arial, sans-serif;
			color: #333;
		}
		#mermaid-0 .cluster-label text {
			fill: #333;
		}
		#mermaid-0 .cluster-label span,
		#mermaid-0 p {
			color: #333;
		}
		#mermaid-0 .label text,
		#mermaid-0 span,
		#mermaid-0 p {
			fill: #333;
			color: #333;
		}
		#mermaid-0 .node rect,
		#mermaid-0 .node circle,
		#mermaid-0 .node ellipse,
		#mermaid-0 .node polygon,
		#mermaid-0 .node path {
			fill: #ececff;
			stroke: #9370db;
			stroke-width: 1px;
		}
		#mermaid-0 .flowchart-label text {
			text-anchor: middle;
		}
		#mermaid-0 .node .label {
			text-align: center;
		}
		#mermaid-0 .node.clickable {
			cursor: pointer;
		}
		#mermaid-0 .arrowheadPath {
			fill: #333333;
		}
		#mermaid-0 .edgePath .path {
			stroke: #333333;
			stroke-width: 2px;
		}
		#mermaid-0 .flowchart-link {
			stroke: #333333;
			fill: none;
		}
		#mermaid-0 .edgeLabel {
			background-color: #e8e8e8;
			text-align: center;
		}
		#mermaid-0 .edgeLabel rect {
			opacity: 0.5;
			background-color: #e8e8e8;
			fill: #e8e8e8;
		}
		#mermaid-0 .cluster rect {
			fill: #ffffde;
			stroke: #aaaa33;
			stroke-width: 1px;
		}
		#mermaid-0 .cluster text {
			fill: #333;
		}
		#mermaid-0 .cluster span,
		#mermaid-0 p {
			color: #333;
		}
		#mermaid-0 div.mermaidTooltip {
			position: absolute;
			text-align: center;
			max-width: 200px;
			padding: 2px;
			font-family: 'trebuchet ms', verdana, arial, sans-serif;
			font-size: 12px;
			background: hsl(80, 100%, 96.2745098039%);
			border: 1px solid #aaaa33;
			border-radius: 2px;
			pointer-events: none;
			z-index: 100;
		}
		#mermaid-0 .flowchartTitleText {
			text-anchor: middle;
			font-size: 18px;
			fill: #333;
		}
		#mermaid-0 :root {
			--mermaid-font-family: 'trebuchet ms', verdana, arial, sans-serif;
		}
	</style><g
		><marker
			orient="auto"
			markerHeight="12"
			markerWidth="12"
			markerUnits="userSpaceOnUse"
			refY="5"
			refX="10"
			viewBox="0 0 12 20"
			class="marker flowchart"
			id="flowchart-pointEnd"
			><path
				style="stroke-width: 1; stroke-dasharray: 1, 0;"
				class="arrowMarkerPath"
				d="M 0 0 L 10 5 L 0 10 z"
			/></marker
		><marker
			orient="auto"
			markerHeight="12"
			markerWidth="12"
			markerUnits="userSpaceOnUse"
			refY="5"
			refX="0"
			viewBox="0 0 10 10"
			class="marker flowchart"
			id="flowchart-pointStart"
			><path
				style="stroke-width: 1; stroke-dasharray: 1, 0;"
				class="arrowMarkerPath"
				d="M 0 5 L 10 10 L 10 0 z"
			/></marker
		><marker
			orient="auto"
			markerHeight="11"
			markerWidth="11"
			markerUnits="userSpaceOnUse"
			refY="5"
			refX="11"
			viewBox="0 0 10 10"
			class="marker flowchart"
			id="flowchart-circleEnd"
			><circle
				style="stroke-width: 1; stroke-dasharray: 1, 0;"
				class="arrowMarkerPath"
				r="5"
				cy="5"
				cx="5"
			/></marker
		><marker
			orient="auto"
			markerHeight="11"
			markerWidth="11"
			markerUnits="userSpaceOnUse"
			refY="5"
			refX="-1"
			viewBox="0 0 10 10"
			class="marker flowchart"
			id="flowchart-circleStart"
			><circle
				style="stroke-width: 1; stroke-dasharray: 1, 0;"
				class="arrowMarkerPath"
				r="5"
				cy="5"
				cx="5"
			/></marker
		><marker
			orient="auto"
			markerHeight="11"
			markerWidth="11"
			markerUnits="userSpaceOnUse"
			refY="5.2"
			refX="12"
			viewBox="0 0 11 11"
			class="marker cross flowchart"
			id="flowchart-crossEnd"
			><path
				style="stroke-width: 2; stroke-dasharray: 1, 0;"
				class="arrowMarkerPath"
				d="M 1,1 l 9,9 M 10,1 l -9,9"
			/></marker
		><marker
			orient="auto"
			markerHeight="11"
			markerWidth="11"
			markerUnits="userSpaceOnUse"
			refY="5.2"
			refX="-1"
			viewBox="0 0 11 11"
			class="marker cross flowchart"
			id="flowchart-crossStart"
			><path
				style="stroke-width: 2; stroke-dasharray: 1, 0;"
				class="arrowMarkerPath"
				d="M 1,1 l 9,9 M 10,1 l -9,9"
			/></marker
		><g class="root"
			><g class="clusters" /><g class="edgePaths"
				><path
					marker-end="url(#flowchart-pointEnd)"
					style="fill:none;"
					class="edge-thickness-normal edge-pattern-solid flowchart-link LS-order LE-config"
					id="L-order-config-0"
					d="M53.664,19.5L57.831,19.5C61.997,19.5,70.331,19.5,78.664,19.5C86.997,19.5,95.331,19.5,99.497,19.5L103.664,19.5"
				/><path
					marker-end="url(#flowchart-pointEnd)"
					style="fill:none;"
					class="edge-thickness-normal edge-pattern-solid flowchart-link LS-config LE-env"
					id="L-config-env-0"
					d="M162.422,19.5L166.589,19.5C170.755,19.5,179.089,19.5,187.422,19.5C195.755,19.5,204.089,19.5,208.255,19.5L212.422,19.5"
				/><path
					marker-end="url(#flowchart-pointEnd)"
					style="fill:none;"
					class="edge-thickness-normal edge-pattern-solid flowchart-link LS-env LE-afterLoad"
					id="L-env-afterLoad-0"
					d="M252.727,19.5L256.893,19.5C261.06,19.5,269.393,19.5,277.727,19.5C286.06,19.5,294.393,19.5,298.56,19.5L302.727,19.5"
				/></g
			><g class="edgeLabels"
				><g class="edgeLabel"
					><g transform="translate(0, 0)" class="label"
						><foreignObject height="0" width="0"
							><div
								style="display: inline-block; white-space: nowrap;"
								xmlns="http://www.w3.org/1999/xhtml"
							>
								<span class="edgeLabel" />
							</div></foreignObject
						></g
					></g
				><g class="edgeLabel"
					><g transform="translate(0, 0)" class="label"
						><foreignObject height="0" width="0"
							><div
								style="display: inline-block; white-space: nowrap;"
								xmlns="http://www.w3.org/1999/xhtml"
							>
								<span class="edgeLabel" />
							</div></foreignObject
						></g
					></g
				><g class="edgeLabel"
					><g transform="translate(0, 0)" class="label"
						><foreignObject height="0" width="0"
							><div
								style="display: inline-block; white-space: nowrap;"
								xmlns="http://www.w3.org/1999/xhtml"
							>
								<span class="edgeLabel" />
							</div></foreignObject
						></g
					></g
				></g
			><g class="nodes"
				><a transform="translate(26.83203125, 19.5)" xlink:href="#order"
					><g
						title="order hook"
						id="flowchart-order-14"
						class="node default clickable flowchart-label"
						><rect
							height="39"
							width="53.6640625"
							y="-19.5"
							x="-26.83203125"
							ry="0"
							rx="0"
							style=""
							class="basic label-container"
						/><g transform="translate(-19.33203125, -12)" style="" class="label"
							><rect /><foreignObject height="24" width="38.6640625"
								><div
									style="display: inline-block; white-space: nowrap;"
									xmlns="http://www.w3.org/1999/xhtml"
								>
									<span class="nodeLabel">order</span>
								</div></foreignObject
							></g
						></g
					></a
				><a transform="translate(133.04296875, 19.5)" xlink:href="#config"
					><g
						title="config hook"
						id="flowchart-config-15"
						class="node default clickable flowchart-label"
						><rect
							height="39"
							width="58.7578125"
							y="-19.5"
							x="-29.37890625"
							ry="0"
							rx="0"
							style=""
							class="basic label-container"
						/><g transform="translate(-21.87890625, -12)" style="" class="label"
							><rect /><foreignObject height="24" width="43.7578125"
								><div
									style="display: inline-block; white-space: nowrap;"
									xmlns="http://www.w3.org/1999/xhtml"
								>
									<span class="nodeLabel">config</span>
								</div></foreignObject
							></g
						></g
					></a
				><a transform="translate(232.57421875, 19.5)" xlink:href="#env"
					><g title="env hook" id="flowchart-env-17" class="node default clickable flowchart-label"
						><rect
							height="39"
							width="40.3046875"
							y="-19.5"
							x="-20.15234375"
							ry="0"
							rx="0"
							style=""
							class="basic label-container"
						/><g transform="translate(-12.65234375, -12)" style="" class="label"
							><rect /><foreignObject height="24" width="25.3046875"
								><div
									style="display: inline-block; white-space: nowrap;"
									xmlns="http://www.w3.org/1999/xhtml"
								>
									<span class="nodeLabel">env</span>
								</div></foreignObject
							></g
						></g
					></a
				><a transform="translate(345.03515625, 19.5)" xlink:href="#afterload"
					><g
						title="afterLoad hook"
						id="flowchart-afterLoad-19"
						class="node default clickable flowchart-label"
						><rect
							height="39"
							width="84.6171875"
							y="-19.5"
							x="-42.30859375"
							ry="0"
							rx="0"
							style=""
							class="basic label-container"
						/><g transform="translate(-34.80859375, -12)" style="" class="label"
							><rect /><foreignObject height="24" width="69.6171875"
								><div
									style="display: inline-block; white-space: nowrap;"
									xmlns="http://www.w3.org/1999/xhtml"
								>
									<span class="nodeLabel">afterLoad</span>
								</div></foreignObject
							></g
						></g
					></a
				></g
			></g
		></g
	></svg
>
